<template>
  <div>
    <ul class="user_item" v-for="(item, index) in data" :key="index">
      <li class="item_name">
        <div>
          <img :src="item.avatar | imageUrl" alt="" />
        </div>
        <div class="info-left">
          <div class="mb">
            {{ item.nick }}
          </div>
          <div class="date">
            {{ getTime(item.createTime) }}
          </div>
        </div>
        <div class="money">{{ item.money }}</div>
      </li>
      <li class="info">
        <ul>
          <li></li>
          <li>
            <router-link
              :to="'/secondery_user?id=' + item.accountId"
              style="color: #67cafd"
            >
              下级用户</router-link
            >
          </li>
          <router-link tag="li" :to="'/account_details?id=' + item.accountId"
            >明细</router-link
          >
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { formatDate } from "@/utils/filters";
export default {
  props: ["data"],
  data() {
    return {
      imgUrl: "https://xueyizhi.oss-cn-shenzhen.aliyuncs.com/",
    };
  },
  methods: {
    getTime(time) {
      return formatDate(time);
    },
  },
};
</script>

<style scoped>
.user_item {
  padding: 38px 18px;
  display: flex;
  align-items: center;
  border-bottom: 1px #e7e7e7 solid;
  background: #fff;
}
.user_item img {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  border: 1px #ccc solid;
  margin-right: 14px;
}
.user_item .item_name {
  display: flex;
  align-items: center;
  flex: 1;
}
.user_item .item_name .info-left {
  margin-right: 56px;
}
.user_item .item_name .info-left .mb {
  margin-bottom: 18px;
  color: #333;
  font-size: 28px;
}
.user_item .item_name .info-left .date {
  color: #999;
  font-size: 24px;
}
.user_item .item_name .money {
  font-size: 28px;
  color: #ff9a22;
}
.user_item .list_per {
  color: #ff9a22;
  text-align: left;
  width: 25%;
}
.info {
  flex: 1;
}
.info ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info ul li {
  text-align: center;
}
.info ul a {
  color: #333;
  text-align: center;
}
</style>